<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>开始使用layui</title>
    <link rel="stylesheet" href="/static/layui/css/layui.css"/>
    <script src="/static/layui/layui.js"></script>
</head>
<body>
<div>
<script type="text/html" id="toolbar">
    <button type="button" class="layui-btn">新增</button>
    <button type="button" class="layui-btn layui-btn-danger">删除</button>

</script>
<table id="demo" lay-filter="test"></table>
</div>
<script>
    // 必须要导入 table模块 layui.use('table',...)
    layui.use('table', function(){
        var table = layui.table;
        // 为表格填充数据
        table.render({
            elem: '#demo'
            ,height: 312
            ,url: 'data.json'
            ,toolbar:"#toolbar"
            //,page: true //开启分页
            ,cols: [[ //表头
                //{"id":1,"username":"shine1","sex":"男","city":"保定","score":100}
                //field的值json的key
                //title： 列标题  sort 排序  width：宽
                {field:'id', width:80, title: 'ID', sort: true}
                ,{field:'username', width:80, title: '用户名'}
                ,{field:'sex', width:80, title: '性别', sort: true}
                ,{field:'city',  title: '城市'} //没定义宽度则占满剩余所有宽度，都不定义则所有列均分
                ,{field:'score',width:80, title: '评分', sort: true}
                ,{field:"right",title:"操作",toolbar: '#barDemo'}
            ]]
        });

    });
</script>
<!-- 如下script可以定义在页面的任何位置 -->
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

</body>
</html>